<!-- 投屏组件 -->
<template>
  <view class="cast-container">
    <!-- 投屏按钮 -->
    <button @click="handleCast" class="cast-btn primary">
      <text class="btn-icon">📺</text>
      投屏播放
    </button>

    <!-- 状态提示 -->
    <view class="status-text" v-if="statusMessage">
      {{ statusMessage }}
    </view>

    <!-- 环境信息（调试用） -->
    <view class="env-info" v-if="showDebugInfo">
      <view class="env-item">设备类型: {{ envInfo.deviceType }}</view>
      <view class="env-item">运行环境: {{ envInfo.env }}</view>
      <view class="env-item">AirPlay支持: {{ envInfo.hasAirPlay ? '是' : '否' }}</view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import deviceDetector from '@/utils/device-detector.js'
import iosAirPlay from '@/utils/ios-airplay.js'

// 组件属性
const props = defineProps({
  videoUrl: {
    type: String,
    required: true
  },
  videoTitle: {
    type: String,
    default: '视频投屏'
  },
  showDebug: {
    type: Boolean,
    default: false
  }
})

// 状态变量
const statusMessage = ref('')
const isCasting = ref(false)
const showDebugInfo = ref(props.showDebug)

// 环境信息
const envInfo = reactive({
  deviceType: '',
  env: '',
  hasAirPlay: false,
  isWeChat: false,
  isMobile: false
})

// 检测环境
const detectEnvironment = () => {
  const fullEnv = deviceDetector.getFullEnvironment()
  const airplaySupport = deviceDetector.checkAirPlaySupport()
  
  Object.assign(envInfo, {
    deviceType: fullEnv.type,
    env: fullEnv.env,
    hasAirPlay: airplaySupport.supported,
    isWeChat: fullEnv.env === 'wechat',
    isMobile: fullEnv.isMobile
  })
  
  return envInfo
}

// 处理投屏
const handleCast = async () => {
  const env = detectEnvironment()
  
  if (!env.hasAirPlay) {
    statusMessage.value = '当前设备不支持AirPlay投屏'
    return
  }

  if (env.isWeChat) {
    // 微信环境提示
    statusMessage.value = '微信内投屏受限，请使用浏览器打开'
    return
  }

  // 开始AirPlay投屏
  try {
    statusMessage.value = '正在搜索AirPlay设备...'
    const result = await iosAirPlay.startAirPlay(props.videoUrl, props.videoTitle)
    
    if (result.success) {
      isCasting.value = true
      statusMessage.value = 'AirPlay投屏已启动'
    } else {
      statusMessage.value = 'AirPlay投屏失败: ' + result.message
    }
  } catch (error) {
    console.error('投屏失败:', error)
    statusMessage.value = '投屏失败: ' + error.message
  }
}

// 停止投屏
const stopCasting = async () => {
  try {
    const result = await iosAirPlay.stopAirPlay()
    isCasting.value = false
    statusMessage.value = result.message
  } catch (error) {
    console.error('停止投屏失败:', error)
    statusMessage.value = '停止投屏失败'
  }
}

// 获取组件状态（供父组件调用）
const getCastStatus = () => {
  return {
    isCasting: isCasting.value,
    statusMessage: statusMessage.value,
    envInfo: { ...envInfo },
    canCast: envInfo.hasAirPlay && !envInfo.isWeChat
  }
}

// 暴露方法给父组件
defineExpose({
  getCastStatus,
  startCast: handleCast,
  stopCast: stopCasting,
  detectEnvironment
})

// 初始化
onMounted(() => {
  detectEnvironment()
})
</script>

<style scoped>
.cast-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
}

.cast-btn {
  padding: 24rpx 48rpx;
  border-radius: 16rpx;
  border: none;
  font-size: 30rpx;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15rpx;
  min-width: 200rpx;
  background: linear-gradient(135deg, #007AFF, #0056CC);
  color: white;
  box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.3);
}

.cast-btn:active {
  transform: translateY(2rpx);
  box-shadow: 0 2rpx 6rpx rgba(0, 122, 255, 0.2);
}

.btn-icon {
  font-size: 32rpx;
}

.status-text {
  margin-top: 20rpx;
  font-size: 26rpx;
  color: #666;
  text-align: center;
  min-height: 40rpx;
}

.env-info {
  margin-top: 30rpx;
  padding: 20rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
  font-size: 24rpx;
  color: #495057;
}

.env-item {
  margin-bottom: 8rpx;
  display: flex;
  justify-content: space-between;
}

.env-item:last-child {
  margin-bottom: 0;
}
</style>